<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>非父子组件传值（Bus/总线/发布订阅模式/观察者模式）</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<div id="app">
		<child content="Hello"></child>
		<child content="World"></child>
	</div>
	<script type="text/javascript">

		Vue.prototype.bus = new Vue()

		Vue.component('child', {
			data: function() {
				return {
					selfContent: this.content
				}
			},
			props: {
				content: {
					type: String
				}
			},
			template: '<div @click="change">{{selfContent}}</div>',
			methods: {
				change: function() {
					this.bus.$emit('shut', this.selfContent)
				}
			},
			mounted: function() {
				var this_ = this
				this.bus.$on('shut', function(msg) {
					this_.selfContent = msg
				})
			}
		})
		var vm = new Vue({
			el: '#app'
		})
	</script>
</body>
</html>